<nav id="modal-nav" class="step-by-step">
  <a ng-repeat="state in states"
     ng-if="state.stateController.visible"
     ng-click="wizard.toTab($event)"
     ng-class="{ active: state.name === wizard.getCurrentStateName(), 'not-complete': !wizard.isCompleted(state.name) }"
     data-modal-tab="{{ state.name }}"
     translate="{{ state.translation }}">
  </a>
</nav>
<nav id="breadcrumb"></nav>

<ng-include src="'shared/partials/wizards/' + name + '.html'"></ng-include>

<footer>
  <a ng-if="!wizard.isLast()" ng-click="wizard.toTab($event)" ng-keyup="keyUp($event)"
                                                              data-modal-tab="next" class="submit" tabindex="100"
                                                                                                   ng-class="{active: wizard.getCurrentStateController().isValid(), inactive: !wizard.getCurrentStateController().isValid()}">
    {{ 'WIZARD.NEXT_STEP' | translate }}
  </a>
  <a ng-if="wizard.isLast()" ng-click="!wizard.getCurrentStateController().isDisabled && wizard.submit()" ng-keyup="keyUpSubmit($event)"
                                                                                                          data-modal-tab="next" class="submit" tabindex="100"
                                                                                                                                               ng-class="{active: !wizard.getCurrentStateController().isDisabled, inactive: wizard.getCurrentStateController().isDisabled}">
    {{ wizard.getFinalButtonTranslation() | translate}}
  </a>
  <a ng-if="wizard.hasPrevious()" ng-click="wizard.toTab($event)" ng-keyup="keyUp($event)"
                                                                  data-modal-tab="previous" class="cancel" tabindex="101">
    {{ 'WIZARD.BACK' | translate}}
  </a>
</footer>

<div class="btm-spacer"></div>
